<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery Validation</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-validate/1.19.1/additional-methods.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row" >
        <div class="col-md-12 col-md-offset-3">
            <h2>用户注册</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form action="#" method="post" id="regForm" autocomplete="off" class="form-horizontal">

                <div class="form-group">
                    <label for="username" class="control-label col-md-2">用户名</label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" id="username" name="username">
                    </div>
                </div>
                <div class="form-group">
                    <label for="pwd" class="control-label col-md-2">密码</label>
                    <div class="col-md-10">
                        <input type="password" class="form-control" id="pwd" name="pwd">
                    </div>
                </div>
                <div class="form-group">
                    <label for="confirm" class="control-label col-md-2">重复密码</label>
                    <div class="col-md-10">
                        <input type="password" class="form-control" id="confirm" name="confirm">
                    </div>
                </div>
                <div class="form-group">
                    <label for="email" class="control-label col-md-2">Email</label>
                    <div class="col-md-10">
                        <input type="email" class="form-control" id="email" name="email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="website" class="control-label col-md-2">网址</label>
                    <div class="col-md-10">
                        <input type="url" class="form-control" id="website" name="website">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-10 col-md-offset-2">
                        <input type="checkbox" id="agree" name="agree"> <label for="agree">同意协议</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-10 col-md-offset-2">
                        <input type="submit" class="btn btn-primary" id="btnSubmit" value="提交">
                        <input type="reset" class="btn btn-default" value="重置">
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>



</body>
</html>
<script>
    $(document).ready(function(){
        // 验证逻辑
        $("#regForm").validate({
            rules:{
                username:{required:true,minlength:2,remote:"/checkuser/"},
                pwd:{required:true,minlength:6},
                confirm:{required:true,equalTo:"#pwd"},
                email:{email:true},
                website:{url:true},
                agree:{ required:true }
            },
            messages:{
                username:{required:"用户名必填",minlength:"用户名不得少于2位！",remote:"当前用户名不可用！"},
                pwd:{required:"密码必填",minlength:"用户名不得少于6位！"},
                confirm:{required:"重复必填",equalTo:"两次密码不一致！"},
                email:{email:"邮箱格式不正确！"},
                website:{url:"网址格式不正确！"},
                agree:{required: "必须勾选同意协议才能注册"}
            },
            submitHandler: function(form){
                $.ajax({
                    type: "POST",
                    url: "/reg2/",
                    data: $(form).serialize(),
                    success: function (res) {
                        console.log(res);
                    }
                });
            }
        });

        {#$("#btnSubmit").click(function(){#}
        {#    // alert("ok");#}
        {#    // console.log('test');#}
        {#   // var userinf={#}
        {#   //     username:$("#username").val(),#}
        {#   //     pwd:$("#pwd").val(),#}
        {#   //     email:$("#email").val()#}
        {#   // };#}
        {#    $.ajax({#}
        {#        type:"POST",#}
        {#        url:"/reg2/",#}
        {#        // 页对象取值#}
        {#        // data:userinf,#}
        {#        // 表单序列化值serialize()#}
        {#        data:$("#regForm").serialize(),#}
        {#        success:function(res){#}
        {#            console.log(res);#}
        {#        }#}
        {#    });#}
        //});
    });

</script>